<template>
  <div>
    <table>
      <tr>苹果10￥/斤,折扣 8折</tr>
      <tr>请输入你咬购买的斤数<input type="text" v-model="num"> </tr>
      <tr><button @click="fn">结账买单</button></tr>
      <tr>结账单:总价{{total}}￥元 折后价:{{price}}元 省了:{{AfterPrice}}元</tr>
    </table>
  </div>
</template>

<script>
export default {
   data() {
    return {
        num:'',
        total:'',
        AfterPrice:'',
        price:''
    }
   },
   methods:{
      fn(){
        this.total=this.num*10,
        this.price=this.total*0.8,
        this.AfterPrice=this.total - this.price
      }
   }
    }

 
</script>

<style lang="less">
  table{
    text-align: center;
    margin: 0 auto;
  }
</style>